<template>
  <PageWrapper dense>
    <div class="_page-wrapper">
      <a-typography>
        <a-typography-title :level="5" class="_title">{{ data.title }}</a-typography-title>
        <a-space :size="18" class="_page-header">
          <a-typography-text>{{ data.creator }}</a-typography-text>
          <a-typography-text type="secondary">{{ data.createtime }}</a-typography-text>
        </a-space>
        <a-typography-paragraph class="_content">
          <div v-html="data.content"></div>
        </a-typography-paragraph>
      </a-typography>
    </div>
  </PageWrapper>
</template>
<script lang="ts">
export default {
  name: 'NoticeDetail',
};
</script>
<script setup lang="ts">
import { ref, unref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { PageWrapper } from '/@/components/Page';
import { useGo } from '/@/hooks/web/usePage';
import { useTabs } from '/@/hooks/web/useTabs';
import { getNoticeInfo } from '/@/api/sys/notice';
const route = useRoute();
const go = useGo();
// 此处可以得到用户ID
const id = ref(route.params?.id);

// 页面左侧点击返回链接时的操作
function goBack() {
  // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
  go('/system/account');
}

const dataLoading = ref(false);
const data = ref([]);
const fetchData = async () => {
  dataLoading.value = true;
  try {
    const res = await getNoticeInfo({ id: unref(id) });
    data.value = res;
  } catch (e) {
    console.log(e);
  } finally {
    dataLoading.value = false;
  }
};
onMounted(() => {
  fetchData();
});
</script>

<style lang="less" scoped>
._page-wrapper {
  margin: 16px;
  background-color: @component-background;
  padding: 24px 40px;
  ._title {
    text-align: center;
  }
  ._page-header {
    margin-bottom: 15px;
  }
  ._content {
    padding: 24px 40px;
    background-color: @background-color-light;
  }
}
</style>